<template>
	<div>

		<el-dialog title="查看详情" :visible.sync="dialogTableVisible"   width="100%" style="margin-bottom: 10px;">
			<el-table :data="gridData" style="font-size: small;">

				<el-table-column prop="id" label="编号:" align="center"></el-table-column>

				<el-table-column prop="name" label="值"  align="center"></el-table-column>

				<el-table-column prop="creator" label="创建人" align="center"></el-table-column>

				<el-table-column prop="createtime" label="创建时间" align="center"></el-table-column>

				<el-table-column prop="modifier" label="修改人"  align="center"></el-table-column>

				<el-table-column prop="modififytime" label="修改时间"  align="center"></el-table-column>

		     <el-table-column prop="handler" label="操作" align="center" width="280px;">
		     	<template slot-scope="scope">
		     		<el-button size="mini" style="margin-right: 20px;" @click="editData(scope.$index, scope.row)">编辑</el-button>
		     		<el-button size="mini" type="danger" @click="deleteData(scope.$index, scope.row)">删除</el-button>
		     	</template>
		     </el-table-column>

			</el-table>

			<div style="width: 100%; text-align: right; margin-top:20px;">
			<el-button size="mini" type="primary" style="margin: 20px;" @click="dialogTableVisible = false">关闭</el-button>
			<el-button type="success" size="mini" @click="addData()" >新增</el-button>
			</div>

		</el-dialog>




		<el-table  :data="tableData" style="width: 100%;" border>
			<el-table-column type="selection" width="55"></el-table-column>

			<el-table-column prop="id" label="编号"  align="center" ></el-table-column>

			<el-table-column prop="name" label="名称"  align="center" >
				<template slot-scope="scope">
					<el-popover trigger="hover" placement="top">
						<p>名称: {{ scope.row.name }}</p>
						<p>说明: {{ scope.row.content }}</p>
						<div slot="reference" class="name-wrapper">
							<el-tag size="medium">{{ scope.row.name }}</el-tag>
						</div>
					</el-popover>
				</template>
			</el-table-column>

			<el-table-column prop="content" label="说明" align="center"></el-table-column>

			<el-table-column prop="state" label="状态" align="center" :filters="[{ text: '有效', value: '有效' }, { text: '无效', value: '无效' }]"
      :filter-method="filterState"  filter-placement="bottom-end"></el-table-column>

			<el-table-column prop="handler" label="操作" align="center" width="280px;">
				<template slot-scope="scope">
					<el-button size="mini"  @click="dialogTableVisible = true">查看详情</el-button>

				</template>
			</el-table-column>

		</el-table>



	</div>
</template>

<script>
	export default {
		data() {
			return {
				formInline: {
				          name: '',
				          state: ''
				        },
				tableData: [],
				multipleSelection: [],

				gridData: [],
				dialogTableVisible: false,
				dialogFormVisible: false,
				search:'',
				form: {
					id: '',
					name: '',
					content: '',
					creator: '',
					createTime: ''
				},
        currentId:0,
				formLabelWidth: '90px'
			};
		},
		created() {
		},
		methods: {
      selectGrid(id){
        this.getRequest("/dd/getParentIdData/"+id)
        .then(successResponse => {
          if (successResponse.data.status == 200) {
            this.gridData=successResponse.data.obj
          }
          else
            this.$message.error(successResponse.data.msg);
        })
        .catch(failResponse => {
          this.$message.error('网络不通畅');
        })
      },
      show(index, row){
        this.dialogTableVisible = true;
        this.currentId=row.id;
        this.selectGrid(row.id);
      },
      deleteData(index, row){
        this.$confirm('此操作将永久删除全部数据, 是否继续?', '提示', {
        	confirmButtonText: '确定',
        	cancelButtonText: '取消',
        	type: 'warning'
        }).then(({ value }) => {
          this.postRequest("/dd/delete",{
            id:row.id
          })
          .then(resp=>{
                this.$message.success("删除成功！")
                this.selectGrid(this.currentId);
          })
          .catch(fail=>{
            this.$message.error('网络不通畅');
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          });
        });
      },
      addData(){
        this.$prompt('请输入值', '编辑信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          this.postRequest("/dd/add",{
            creator:this.$store.state.userInfo.name,
            name:value,
            parentid:this.currentId,
          })
          .then(resp=>{
                this.$message.success("添加成功！")
                this.selectGrid(this.currentId);
          })
          .catch(fail=>{
            this.$message.error('网络不通畅');
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      editData(index, row) {
              this.$prompt('请输入值', '编辑信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
              }).then(({ value }) => {
                this.postRequest("/dd/edit",{
                  modifier:this.$store.state.userInfo.name,
                  name:value,
                  id:row.id
                })
                .then(resp=>{
                      this.$message.success("编辑成功！")
                      this.selectGrid(this.currentId);
                })
                .catch(fail=>{
                  this.$message.error('网络不通畅');
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '取消输入'
                });
              });
            },
			getTableData(){
				this.getRequest("/dd/get/营销管理")
				.then(successResponse => {
				  if (successResponse.data.status == 200) {
				    this.tableData=successResponse.data.obj
				  }
				  else
				    this.$message.error(successResponse.data.msg);
				})
				.catch(failResponse => {
				  this.$message.error('网络不通畅');
				})
			},
			handleDeleteAll(index, row) {
				this.$confirm('此操作将永久删除全部数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			/* resetDateFilter() {
			        this.$refs.filterTable.clearFilter('id');
			},
			clearFilter() {
			        this.$refs.filterTable.clearFilter();
			}, */
			/* formatter(row, column) {
			        return row.address;
			}, */
			filterId(value, row) {
			        return row.id === value;
			},
			filterState(value, row) {
			        return row.state === value;
			},
			filterName(value, row) {
			        return row.name === value;
			}
			/* filterHandler(value, row, column) {
			        const state = column['state'];
			        return row[state] === value;
			} */
		},
	};
</script>

<style>
</style>
